<template>
  <div class="app-container">
    <!-- 筛选搜索 -->
    <el-form :model="queryParams" ref="queryForm" size="mini" :inline="true" class="search-wrapper" :rules="rules">
      <el-row style="padding-left: 15px;">
        <el-col :span="5">
          <el-form-item label="接口名称" prop="apiName" for="apiName">
            <el-input v-model="queryParams.apiName" placeholder="请输入名称" id="apiName" @keyup.enter.native="handleQuery" style="width: 180px;"/>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="应用名称" prop="name" for="name">
            <el-input v-model="queryParams.name" placeholder="请输入名称" id="name" @keyup.enter.native="handleQuery" style="width: 180px;"/>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="请求结果" prop="success" for="success">
            <el-select v-model="queryParams.success" style="width: 120px" clearable @keyup.enter.native="handleQuery" id="success">
              <el-option v-for="item in result_options" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item label="开始时间" prop="time">
          <el-date-picker
            v-model="queryParams.time"
            type="datetimerange"
            align="right"
            unlink-panels
            range-separator="-"
            value-format="yyyy-MM-dd HH:mm:ss"
            date-format="yyyy-MM-dd"
            time-format="HH:mm:ss"
            @change="dateFormat"
          />
        </el-form-item>
        </el-col>
      </el-row>
      <el-row style="padding-left: 15px;">
        <el-form-item label="耗时" prop="minTime" for="minTime">
          <el-input v-model.number="queryParams.minTime" placeholder="最小值" id="minTime" @keyup.enter.native="handleQuery" style="width: 180px;"/>
        </el-form-item>
        <span style="margin-right: 10px; font-weight:bolder;">~</span>
        <el-form-item prop="maxTime" for="maxTime">
          <el-input v-model.number="queryParams.maxTime" placeholder="最大值" id="maxTime" @keyup.enter.native="handleQuery" style="width: 180px;"/>
        </el-form-item>
        <el-form-item style="position: absolute; right: 12%;">
          <el-button type="primary" icon="el-icon-search" size="small" style="background-color: #0052D9" @click="handleQuery">查询</el-button>
        </el-form-item>
        <el-form-item style="position: absolute; right: 5%;">
          <el-button type="primary" icon="el-icon-delete" size="small" @click="resetForm" style="background-color: white; color: black; border-color: rgb(128,128,128);">重置</el-button>
        </el-form-item>
      </el-row>
    </el-form>
    <!-- Table -->
    <el-table v-loading="loading" :data="logList" border style="width: 100%; box-shadow: 4px 4px 40px rgba(0, 0, 0, .05); margin-bottom: 20px; overflow-x: scroll; font-size: 13px;">
      <el-table-column
        type="index"
        width="50"
        align="center">
      </el-table-column>
      <el-table-column label="应用名称" align="center" prop="name" width="100"/>
      <el-table-column label="接口名称" align="center" prop="apiName" width="100"/>
      <el-table-column label="用户IP" align="center" prop="userIp" />
      <el-table-column label="接口地址" align="center" prop="requestUrl" />
      <el-table-column label="AppId" align="center" prop="appId" width="80" />
      <el-table-column label="接口参数" align="center" prop="requestParam" width="80"/>
      <el-table-column label="开始时间" align="center" prop="startTime" />
      <el-table-column label="结束时间" align="center" prop="endTime" />
      <el-table-column label="耗时" align="center" prop="executeTime" width="80"/>
      <el-table-column label="请求结果" align="center" prop="success" :formatter="resultFormat" width="80">
        <template #default="scope">
          <div style="display: flex; justify-content: center; align-items: center;">
            <span slot="reference" v-if="scope.row.success === 0" style="margin-right: 8px;">
              <i class="dotClass" style="background-color: #F56C6C; float:left"></i>
              <span style="float: left;">失败</span>
            </span>
            <span slot="reference" v-if="scope.row.success === 1" style="margin-right: 8px;">
              <i class="dotClass" style="background-color: #67C23A; float:left"></i>
              <span style="float: left;">成功</span>
            </span>
          </div>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" align="center" width="80">
        <template #default="scope">
          <el-button type="text" size="mini" @click="logDetail(scope.row)">日志</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="sizeChange"
      @current-change="currentChange"
      :current-page.sync="queryParams.pageNum"
      :page-sizes="[10,20,30,50]"
      :page-size="queryParams.pageSize"
      layout="total, prev, pager, next, sizes"
      :total="queryParams.total"
      background
      style="position: absolute;right:0;" >
    </el-pagination>

    <el-dialog :title="title" :visible.sync="open_log" width="40%">
      <div style="height: 480px; overflow: hidden;">
        <span v-html="message"></span>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getListLog, getlogDetail } from "@/api/system/servicelog";
export default {
  name: "serviceLog",
  data() {
    const validTime = (rule, value, callback) => {
      let validScore = /^[+-]?([0-9]+([.][0-9]*)?|[.][0-9]+)$/;
      if ( value ) {
        if (validScore.test(value)) {
          callback()
        } else {
          callback( new Error("请输入正确的数字") )
        }
      } else {
        callback()
      }
    }
    return {
      // 表格数据
      logList: [],
      pickTime: [],
      loading: false,
      title: '',
      open_log: false,
      message: '',
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        total: 0,
        apiName: null,
        name: null,
        time: [],
        startTime: null,
        endTime: null,
        maxTime: '',
        minTime: '',
        success: '',
      },
      result_options: [
        {
          value: '',
          label: '全部'
        },
        {
          value: '0',
          label: '失败'
        },
        {
          value: '1',
          label: '成功'
        }
      ],
      rules: {
        minTime: [
          { required: false, validator: validTime, trigger: "blur" }
        ],
        maxTime: [
          { required: false, validator: validTime, trigger: "blur" }
        ]
      }
    }
  },
  created() {
    this.getList();
  },
  methods: {
    // 查询列表 queryParams
    getList(){
      this.loading = true;
      getListLog(this.queryParams).then(response => {
        this.logList = response.rows
        this.queryParams.total = response.total;
        this.total = response.total;
        this.loading = false;
      })
    },
    /**修改当前页所触发的函数*/
    sizeChange(val) {
      this.queryParams.pageSize = val
      this.getList()
    },
    currentChange(val) {
      this.queryParams.pageNum = val
      this.getList()
    },
    /** 查询按钮操作 */
    handleQuery(){
      this.$refs.queryForm.validate((valid) => {
        if ( valid ) {
          this.getList()
        } else {
          return false
        }
      })
    },
    // 可能的时间格式调整
    dateFormat(picker) {
      this.queryParams.startTime = picker[0]
      this.queryParams.endTime = picker[1]
      // console.log("时间格式调整")
    },
    // 重置查询
    resetForm() {
      this.$refs.queryForm.resetFields()
      this.queryParams.pageNum = 1
      this.queryParams.startTime = null  // 手动重置 非queryForm内容
      this.queryParams.endTime = null
      this.getList()
      // console.log(this.queryParams)
    },
    logDetail(row){
      getlogDetail(row.id).then(response => {
        let temp = response.msg
        this.message = JSON.stringify(temp, null, 10)
        // console.log(this.message)
      })
      this.title = '日志'
      this.open_log = true
    },
    resultFormat(row, column, cellValue) {
      if ( cellValue === 0 ) {
        return "失败"
      }
      if ( cellValue === 1) {
        return "成功"
      }
    }
  }
}
</script>

<style scoped lang="scss">
.search-wrapper {
  padding-top: 20px;
  padding-bottom: 10px;
  padding-left: 40px;
  margin-bottom: 20px;
  overflow: hidden;
  border-width: 5px;
  border-color: rgba(0, 0, 0);
  box-shadow: 2px 2px 10px rgba(0, 0, 0, .25);
}
.dotClass {
  width: 8px;
  height: 8px;
  margin-top: 7px;
  margin-right: 3px;
  border-radius: 50%;
  display: block;
}
</style>
